<template>
  <div class="linklist">
    <div ref="changeVideo" v-if="changeV">
      <embed  width="100%" height="200" palette="transparent" units="pixels" :src="data.videos" autostart=false loop=false>
    </div>
   <x-button v-if="isEditing" text="点我替换视频"  @click.native="processButton" type="primary"></x-button>
 </div>
</template>
<script>
import {XInput,XButton} from 'vux'
import { mapState, mapActions } from 'vuex'
export default {
  components:{
    XInput,
    XButton
  },
  name: 'UnitVideo',
  data () {
    return {
      changeV:true,    
    }
  },
  mounted: function () {
   setTimeout(() => {
   }, 5000)
  },
  computed:{
    ...mapState({
        data:state => state.moduleEdit.data,
        isEditing:state => state.moduleEdit.isEditing,
      }),
  },
  methods:{
   processButton:_.debounce(function () {
    const _this = this
      this.$vux.confirm.prompt('请把腾讯视频链接粘贴到这里', {
        title: '目前只支持腾讯视频地址',
        onConfirm (msg) {
          var strRegex ='(https|https)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]'; 
          var re=new RegExp(strRegex);   
          if(msg!=""){
            if (!re.test(msg)) {   
                alert("请输入正确的url地址");  
               return false;   
              }else{
                const vals = msg.substring(19)
                console.log(vals)
                let arr = _.split(vals, '/')
                if(arr.length==2){
                  _this.changeV = false
                  _this.$store.commit('moduleEdit/changeVideourl',arr[1].substr(0,arr[1].length-5))
                  setTimeout(function(){
                    _this.changeV = true
                  },500)
                }else if(arr.length==3){
                  _this.$vux.loading.show({
                    text: 'loading'
                  })
                  _this.changeV = false
                  _this.$store.dispatch('moduleEdit/getVideoSrc',msg)
                  setTimeout(() => {
                    _this.$vux.loading.hide()
                    _this.changeV = true
                  }, 1000)
                }else{
                  return false
                }
              } 
          }
        }
      })
    }, 500),
  }
}
</script>
